// 导出 PNG/JPEG
<template>
  <el-button @click="graphToPNG" type="primary" style="margin: 10px">导出 PNG</el-button>
  <div id="container"></div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { Graph, DataUri } from "@antv/x6";
import { onMounted, ref } from "vue";

let graph = null;

const graphToPNG = () => {
  ElMessage({
    message: "导出 PNG",
    type: "success",
  });
  graph.toPNG(
    (dataUri: string) => {
      // 下载
      DataUri.downloadDataUri(dataUri, "chart.png");
    },
    {
      padding: {
        top: 20,
        right: 30,
        bottom: 40,
        left: 50,
      },
      quality:1,
    }    
  );
};

const renderGraph = () => {
  graph = new Graph({
    container: document.getElementById("container"),
    width: 800,
    height: 600,
    panning: true,
    mousewheel: true,
    // 设置画布背景颜色
    background: {
      color: "#F2F7FA",
    },
  });

  //创建流程图数据
  const data = {
    //节点数据
    nodes: [
      {
        id: "node1",
        shape: "rect",
        x: 40,
        y: 40,
        width: 100,
        height: 40,
        label: "hello",
        attrs: {
          body: {
            stroke: "#8f8f8f",
            strokeWidth: 1,
            fill: "#fff",
            rx: 6,
            ry: 6,
          },
        },
      },
      {
        id: "node2",
        shape: "rect",
        x: 160,
        y: 180,
        width: 100,
        height: 40,
        label: "world",
        attrs: {
          body: {
            stroke: "#8f8f8f",
            strokeWidth: 1,
            fill: "#fff",
            rx: 6,
            ry: 6,
          },
        },
      },
    ],
    //边数据
    edges: [
      {
        shape: "edge",
        source: "node1", //起始点
        target: "node2", //目标点
        label: "x6",
        attrs: {
          line: {
            stroke: "#8f8f8f",
            strokeWidth: 1,
          },
        },
      },
    ],
  };

  graph.fromJSON(data); // 渲染元素
  graph.centerContent(); // 居中显示
};

onMounted(() => {
  renderGraph();
});
</script>
